<template>
    <!--  -->
    <view class="popup-child" v-if="show" @touch.stop.prevent="">
		<template>
			<view class="mask" @tap="show = false"></view>
			<view class="content">	
				<view class="title">
					{{ data.title }}
				</view>
				<view class="avatars" v-if="data.avatars && data.avatars.length !== 0">
					<view class="item" v-for="(item, index) in data.avatars" :key="index">
						<image v-if="item" :src="item"></image>
						<view v-if="!item" class="empty_avatar"></view>
					</view>
				</view>
				<view class="text" v-if="data.text">
					{{ data.text }}
				</view>
				<view class="buttons" v-if="data.btn1 && data.btn2">
					<view class="button" @tap="show = false">
						{{ data.btn1 }}
					</view>
					<view class="button red" @tap="sure">
						{{ data.btn2 }}
					</view>
				</view>
			</view>
		</template>
	</view>
</template>
<script>
export default {
	props: {
		data: {
			type: Object,
			default: {
				title: '',			// 弹窗标题
				avatars: [],		// 头像数组
				text: "",			// 描述文本
				btn1: '',			// 按钮1文字
				btn2: '',			// 按钮2文字			
			}
		}
	},
    components: {},
    data() {
        return {
			show: false, 	// 弹窗开关
		};
    },
    computed: {},
    methods: {
		// 确认按钮
		sure() {
			this.$emit('sure',this.show);
			this.show = false;
		}
	},
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
};
</script>
<style scoped lang='scss'>
	.popup-child {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
		.mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 998;
			background-color: rgba($color: #000000, $alpha: 0.4);
		}
		.content {
			width: 100%;
			position: relative;
			z-index: 999;
			background-color: #FFFFFF;
			border-radius: 24rpx;
			padding: 32rpx;
			margin: 0 104rpx;
			overflow: hidden;
		}
		.title {
			padding-top: 32rpx;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
		}
		.avatars {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			padding: 48rpx 0 0 24rpx;
			.item{
				padding: 0 24rpx 24rpx 0;
			}
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
			}
			.empty_avatar {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #DDDDDD;
			}
		}
		.text {
			padding-top: 32rpx;
			font-size: 24rpx;
			color: #666;
			text-align: center;
		}
		.buttons {
			padding-top: 48rpx;
			display: flex;
			justify-content: space-between;
		}
		.button + .button {
			margin-left: 24rpx;
		}
		.button {
			flex: 1;
			border: 1px solid #BBBBBB;
			color: #999999;
			border-radius: 8rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			text-align: center;
		}
		.red {
			border: unset !important;
			color: #FFFFFF !important;
			background-color: #FF5445;
		}
	}
</style>
